<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="main">
<input type="text" v-model="searchString" placeholder="输入搜索内容">
<ul>
    <li v-for="item in filterText">{{item}}</li>
</ul>
</div>
<script>
    //数据
var data=[
    "我是 一名快乐 的程序员",
    "abcdefg,AABBCCDD",
    "1234567",
    "吃得苦中苦，方为人上人",
    "寸金难买寸光阴",
    "欲穷千里目",
    "桃花潭水深千尺"];
//vue实例
    var demo = new Vue({
        el:"#main",//vue实例要操作的元素（包括他的子元素）  这里是 id为main的 那个 div元素
        data:{      //vue实例所需要的数据
            items:data,//这里的data为数组 在上边定义了
            searchString:""
        },
        computed:{
            //使用vue实例中的data中的数据时，要使用this
            filterText:function(){
                var textArray=this.items;
                var searchString=this.searchString;
                if(!searchString){//如果searchString为空，则返回数组中全部元素
                    return textArray;
                }
                searchString=this.searchString.trim().toLowerCase();//将searchString处理
                textArray=this.items.filter(function(value){//filter 方法的作用
                    // 遍历items元素，如果遍历的当前元素 经处理后 等于 searchString 则将该元素返回给textArray数组 ，不等于的话将会返回-1
                if(value.toLowerCase().indexOf(searchString)!==-1){
                    return value;                }
                });
                return textArray;
            }
        }

    })
</script>
</body>
</html>
